import React, { Component } from 'react'
import { nanoid } from 'nanoid' //随机生成字符串 设置id
export default class Header extends Component {
  //input 按下回车需要做哪些事
  // 1.获取value (判断是否为空)
  // 2.生成数据 传给app state -> todos（id,value,done）
  // 3.清空输入框
  handleKeyUp = (e) => {
    const { keyCode, target } = e
    if (keyCode !== 13) return
    //非空判断
    if (target.value.trim() === '') {
      alert('不能为空')
      return
    }
    //准备一个空对象
    const todoObj = { id: nanoid(), name: target.value, done: false }
    //将todoObj 传给app
    this.props.addTodo(todoObj)
    //清空
    target.value = ''
  }
  render() {
    return (
      <div className="todo-header">
        <input
          onKeyUp={this.handleKeyUp}
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    )
  }
}
